<template>
  <ele-modal
    :width="950"
    :visible="visible"
    :confirm-loading="loading"
    :title="'创建退货单'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <table cellpadding="0" cellspacing="0" class="recepit_table2">
      <tr>
        <td class="tit">销售单号</td>
        <td>{{ info.order_sn || '' }}</td>
        <td class="tit">销售时间</td>
        <td>{{ info.sales_time || '' }}</td>
      </tr>
      <tr>
        <td class="tit">会员昵称</td>
        <td>{{ info.nickname || '' }}</td>
        <td class="tit">会员手机</td>
        <td>{{ info.mobile || '' }}</td>
      </tr>
    </table>
    <div class="kd-solid margin-top-15">
      <div class="flex">
        <!-- 左侧-->
        <div class="flex1">
          <div class="flex align-center">
            <div class="kd_left">图片</div>
            <div class="kd_right flex align-center">
              <a-image :width="30" :height="30" :src="info2?.thumb_url" />
            </div>
          </div>
          <div class="flex align-center">
            <div class="kd_left">条码</div>
            <div class="kd_right">{{ info2.bar_code || '' }}</div>
          </div>
          <div class="flex align-center">
            <div class="kd_left">小类</div>
            <div class="kd_right">{{ info2.subclass_code_name || '' }}</div>
          </div>
          <div class="flex align-center">
            <div class="kd_left">品类</div>
            <div class="kd_right">{{ info2.classes_code_name || '' }}</div>
          </div>
          <div class="flex align-center">
            <div class="kd_left">成色</div>
            <div class="kd_right">{{ info2.quality_code_name || '' }}</div>
          </div>
          <div class="flex align-center">
            <div class="kd_left">货品名称</div>
            <div class="kd_right">{{ info2.name || '' }}</div>
          </div>
          <div class="flex align-center">
            <div class="kd_left">数量</div>
            <div class="kd_right">{{ info2.num || '' }}</div>
          </div>
          <div class="flex align-center">
            <div class="kd_left">净金重</div>
            <div class="kd_right">{{ info2.gold_weight || '' }}</div>
          </div>
          <div class="flex align-center">
            <div class="kd_left">销售金价</div>
            <div class="kd_right">{{ info2.sales_gold_price || '' }}元/g</div>
          </div>
          <div class="flex align-center">
            <div class="kd_left">销售工费</div>
            <div class="kd_right">{{ info2.sales_labor || '' }}</div>
            <span class="kd_right_text"
              >元/
              <template v-if="info2?.detail?.labor_type == 1">g</template>
              <template v-if="info2?.detail?.labor_type == 2">件</template>
            </span>
          </div>
          <div class="flex align-center">
            <div class="kd_left">销售标记</div>
            <div class="kd_right">{{ info2.sales || '' }}</div>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="flex1">
          <div class="flex align-center">
            <div class="kd_left">标签价</div>
            <div class="kd_right flex1">{{ info2.sticker_price || '' }}</div>
          </div>
          <div class="flex align-center">
            <div class="kd_left">原售价</div>
            <div class="kd_right flex1">{{ info2.original_amount || '' }}</div>
          </div>
          <div class="flex align-center">
            <div class="kd_left">实售价</div>
            <div class="kd_right flex1">{{ info2.real_amount || '' }}</div>
          </div>
          <div class="flex align-center">
            <div class="kd_left">固定折扣</div>
            <div class="kd_right">{{ info2.regular_discount || '' }}</div>
            <span class="kd_right_text">%</span>
          </div>
          <div class="flex align-center">
            <div class="kd_left">卡券编号</div>
            <div class="kd_right flex1">{{ info2.coupon_id || '' }}</div>
          </div>
          <div class="flex align-center">
            <div class="kd_left">卡券详情</div>
            <div class="kd_right flex1">{{ info2.coupon_id || '' }}</div>
          </div>
          <div class="flex align-center">
            <div class="kd_left">积分抵扣</div>
            <div class="kd_right">{{ info2.points_deduction || '' }}</div>
            <span class="kd_right_text">元</span>
          </div>
          <div class="flex align-center">
            <div class="kd_left">抹零</div>
            <div class="kd_right">{{ info2.small_change || '' }}</div>
            <span class="kd_right_text">元</span>
          </div>
          <div class="flex align-center">
            <div class="kd_left">实售折扣</div>
            <div class="kd_right flex1">{{ info2.real_discount || 0 }}%</div>
          </div>
          <div class="flex align-center">
            <div class="kd_left">积分扣减</div>
            <div class="kd_right flex1">{{ info2.points || 0 }}%</div>
          </div>
          <div class="flex align-center">
            <div class="kd_left">单件备注</div>
            <div class="kd_right flex1">{{ info2.note || '' }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="fs-14 flex align-center margin-bottom-15"
      >应退金额：<h6>{{ info2.pay_amount || 0 }}</h6></div
    >
    <a-form-item label="折旧金额">
      <a-input
        allow-clear
        placeholder="请输入"
        v-model:value="form.dep_charge"
        autocomplete="off"
        type="number"
        @change="change3"
      />
    </a-form-item>
    <div class="fs-14 flex align-center margin-bottom-15"
      >实退金额：<h6>{{ form.amount || 0 }}</h6></div
    >
    <a-form-item label="退款方式">
      <a-select
        placeholder="请选择"
        mode="multiple"
        :options="options"
        @change="change"
        @deselect="change2"
      />
    </a-form-item>
    <a-form-item label="现金" v-if="options[0].isSelect">
      <a-input
        allow-clear
        placeholder="请输入"
        v-model:value="form.cash"
        autocomplete="off"
      />
    </a-form-item>
    <a-form-item label="微信" v-if="options[1].isSelect">
      <a-input
        allow-clear
        placeholder="请输入"
        v-model:value="form.wechat"
        autocomplete="off"
      />
    </a-form-item>
    <a-form-item label="支付宝" v-if="options[2].isSelect">
      <a-input
        allow-clear
        placeholder="请输入"
        v-model:value="form.alipay"
        autocomplete="off"
      />
    </a-form-item>
    <a-form-item label="刷卡" v-if="options[3].isSelect">
      <a-input
        allow-clear
        placeholder="请输入"
        v-model:value="form.card"
        autocomplete="off"
      />
    </a-form-item>
    <a-form-item label="银行转账" v-if="options[4].isSelect">
      <a-input
        allow-clear
        placeholder="请输入"
        v-model:value="form.transfer"
        autocomplete="off"
      />
    </a-form-item>
    <a-form-item label="备注">
      <a-input
        allow-clear
        placeholder="请输入"
        v-model:value="form.note"
        autocomplete="off"
      />
    </a-form-item>
  </ele-modal>
</template>

<script setup>
  import { ref, unref, reactive, onMounted, watch } from 'vue';
  import { Modal, message } from 'ant-design-vue';
  import { useRouter } from 'vue-router';
  import {
    get_sales_detail,
    item_detail
  } from '@/api/order/order/sales/order_list';

  const emit = defineEmits(['update:visible', 'itemRefund']);
  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean,
    orderSn: String,
    itemId: [Number, String]
  });

  const loading = ref(false);
  const info = ref({});
  const info2 = ref({});
  const payInfo = ref({});
  const goods_list = ref([]);
  const ornament_list = ref([]);
  const new_exchange_list = ref([]);
  const junk_exchange_list = ref([]);
  const junk_recovery_list = ref([]);
  const gift_list = ref([]);
  const options = ref([
    { label: '现金', value: 'cash', isSelect: false },
    { label: '微信', value: 'wechat', isSelect: false },
    { label: '支付宝', value: 'alipay', isSelect: false },
    { label: '刷卡', value: 'card', isSelect: false },
    { label: '银行转账', value: 'transfer', isSelect: false }
  ]);
  const form = reactive({
    order_item_id: '',
    order_sn: '',
    dep_charge: '',
    amount: '',
    cash: '',
    wechat: '',
    alipay: '',
    card: '',
    transfer: '',
    note: ''
  });

  onMounted(() => {
    if (props.itemId) {
      form.order_item_id = props.itemId;
    }
    if (props.orderSn) {
      form.order_sn = props.orderSn;
      getDetail();
    }
  });
  const change = (e) => {
    options.value.forEach((item) => {
      e.forEach((m) => {
        if (item.value == m) {
          item.isSelect = true;
        }
      });
    });
  };
  const change2 = (e) => {
    options.value.forEach((item) => {
      if (item.value == e) {
        item.isSelect = false;
      }
    });
    form[e] = 0;
  };
  const change3 = (e) => {
    console.log(e.target.value);
    form.amount = Number(info2.value.pay_amount) - Number(e.target.value);
    console.log(form.amount);
  };

  const getDetail = () => {
    get_sales_detail({
      order_sn: props.orderSn
    }).then((res) => {
      info.value = res.order;
      payInfo.value = res.pay;
      goods_list.value = res.item.goods_list;
      ornament_list.value = res.item.ornament_list;
      new_exchange_list.value = res.item.new_exchange_list;
      junk_exchange_list.value = res.item.junk_exchange_list;
      junk_recovery_list.value = res.item.junk_recovery_list;
      gift_list.value = res.item.gift_list;
    });
    item_detail({
      item_id: props.itemId
    }).then((res) => {
      info2.value = res;
      form.amount = Number(info2.value.pay_amount) - Number(form.dep_charge);
    });
  };

  const save = () => {
    Modal.confirm({
      title: '提示',
      content: '确定退货?',
      maskClosable: true,
      onOk: () => {
        emit('itemRefund', form);
      }
    });
  };

  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };
  defineExpose({});
</script>

<style lang="less" scoped>
  .pay_label {
    display: inline-block;
    min-width: 70px;
    text-align: right;
  }
</style>
